<template>
  <view class="user-manual-page">
    <view v-if="isLoading" class="loading-indicator">
      <uni-load-more status="loading" :showText="false"></uni-load-more>
      <text>加载中...</text>
    </view>
    <view v-else-if="errorMsg" class="error-message">
      <text>{{ errorMsg }}</text>
      <button size="mini" @tap="fetchUserManual">重试</button>
    </view>
    <view v-else class="content-wrapper">
      <!--
        uni-app 的 rich-text 组件用于显示富文本内容。
        nodes 属性可以接收 HTML String 或者一个节点数组。
        推荐使用 HTML String，因为它更直观。
      -->
      <rich-text :nodes="manualContent"></rich-text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const manualContent = ref<string>(''); // 用于存储富文本HTML字符串
const isLoading = ref<boolean>(true);
const errorMsg = ref<string>('');

// 模拟从API获取用户使用说明内容
const fetchUserManual = async () => {
  isLoading.value = true;
  errorMsg.value = '';
  try {
    // 模拟网络请求延迟
    await new Promise(resolve => setTimeout(resolve, 1000));

    // 假设这是从后端获取到的HTML内容
    // ！！!重要：确保此HTML内容是可信的，以防止XSS攻击!!!
    // 如果HTML来自用户输入或不可信来源，需要进行严格的过滤和清理。
    const fetchedHtml = `
      <div style="text-align: center; padding: 20px 0;">
        <h1 style="font-size: 20px; font-weight: bold; margin-bottom: 30px; color: #333;">用户使用说明</h1>
      </div>
      <div style="padding: 0 15px; line-height: 1.8; color: #555;">
        <p>欢迎使用我们的应用！本说明将引导您快速了解各项功能。</p>
        
        <h2 style="font-size: 18px; margin-top: 25px; margin-bottom: 10px; color: #333;">1. 账号与登录</h2>
        <p>您可以通过以下方式注册和登录您的账户：</p>
        <ul>
          <li>手机号验证码登录/注册</li>
          <li>微信授权一键登录</li>
        </ul>
        <p>请确保您的账号信息安全，不要泄露给他人。</p>
        
        <h2 style="font-size: 18px; margin-top: 25px; margin-bottom: 10px; color: #333;">2. 主要功能介绍</h2>
        <p>我们的应用主要包含以下核心功能：</p>
        <ol>
          <li><strong>功能A：</strong>详细描述功能A的作用和使用方法。</li>
          <li><strong>功能B：</strong>详细描述功能B的作用和使用方法。<div><img src="https://ipai-saas.obs.cn-east-3.myhuaweicloud.com:443/e5bf650aaf3c45f28a513e110426e0d4_DEFAULT_TYPE_2222.png" alt="示例图" style="max-width:100%; border-radius: 8px; margin-top:10px;" /></div></li>
          <li><strong>功能C：</strong>详细描述功能C的作用和使用方法。</li>
        </ol>
        
        <h2 style="font-size: 18px; margin-top: 25px; margin-bottom: 10px; color: #333;">3. 常见问题 (FAQ)</h2>
        <p><strong>Q: 忘记密码怎么办？</strong></p>
        <p>A: 您可以通过“忘记密码”流程，使用注册手机号重置密码。</p>
        <p><strong>Q: 如何联系客服？</strong></p>
        <p>A: 您可以在“我的”-“帮助与反馈”页面找到联系客服的方式。</p>
        
        <hr style="margin: 30px 0; border: none; border-top: 1px solid #eee;" />
        <p style="text-align: center; font-size: 12px; color: #999;">感谢您的使用！</p>
        <p style="text-align: center; font-size: 12px; color: #999;">版本号: 1.0.0</p>
      </div>
    `;
    // 对于图片，请使用线上可访问的 HTTPS 链接，或者将图片上传到您的服务器。
    // 如果是本地静态图片，在小程序中 <rich-text> 直接引用 /static/ 下的图片路径可能存在兼容性问题，
    // 更好的做法是将图片转为 Base64 或使用线上链接。

    manualContent.value = fetchedHtml;
  } catch (err) {
    console.error('获取用户手册失败:', err);
    errorMsg.value = '加载说明失败，请检查网络后重试。';
  } finally {
    isLoading.value = false;
  }
};



onLoad(() => {
  fetchUserManual();
});
</script>

<style lang="scss" scoped>
.user-manual-page {
  min-height: 100vh; // 确保页面至少撑满一屏
  background-color: #ffffff; // 页面背景色
  padding-bottom: env(safe-area-inset-bottom); // 适配iPhone X等底部安全区域
  box-sizing: border-box;
}

.loading-indicator,
.error-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60vh; // 占据一定高度，使其居中
  color: #666666;
  font-size: 28rpx;

  button {
    margin-top: 20rpx;
    background-color: #007aff;
    color: white;
    border-radius: 8rpx;
  }
}

.content-wrapper {
  padding: 30rpx; // 内容区域的内边距

  /*
   你可以通过 ::v-deep 或 /deep/ 来尝试穿透修改 rich-text 内部元素的样式，
   但这通常不是最佳实践，且在不同平台兼容性可能不同。
   最好的方式是直接在传入的 HTML 字符串中通过 style 属性或 <style> 标签定义样式。
   例如：
   /deep/ h1 {
     color: red !important; // 可能会被HTML内联样式覆盖
   }
  */
}

// 如果你需要对 rich-text 内部的通用标签做一些基础样式设定（但不推荐，最好在HTML源中控制）
// :global(rich-text img) {
//   max-width: 100%;
//   height: auto;
// }
// :global(rich-text ul), :global(rich-text ol) {
//   padding-left: 20px;
// }
</style>
